<template>
  <aside class="menu">
    <el-scrollbar>
      <el-menu
        class="menu-main"
        router
        :default-active="route.path"
        unique-opened
        background-color="var(--el-bg-color-page)"
      >
        <MenuItem v-for="item in menuList" :item="item" :key="item.path" />
      </el-menu>
    </el-scrollbar>
  </aside>
</template>
<script setup>
import MenuItem from "./components/MenuItem.vue";
import { useRoute } from "vue-router";
const route = useRoute();

const menuList = [
  {
    path: "/system",
    name: "level",
    meta: {
      title: "系统管理",
    },
    children: [
      {
        path: "/system/log",
        // component: () => import("@/views/level/level-2.vue"),
        name: "level-2",
        meta: {
          title: "日志管理",
        },
      },
      {
        path: "/system/user",
        // component: () => import("@/views/level/level-2.vue"),
        name: "level-2",
        meta: {
          title: "用户管理",
        },
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.menu {
  height: 100vh;
  overflow: hidden;

  &-main {
    border: none;
  }

  &-main:not(.el-menu--collapse) {
    width: 220px;
  }
  &:deep(.el-menu-item:hover) {
    outline: 0 !important;
    background: var(--el-menu-active-color);
    color: #fff;
  }
  &:deep(.el-sub-menu__title:hover) {
    outline: 0 !important;
    background: var(--el-menu-active-color);
    color: #fff;
  }
}
</style>
